<div class="template-container">
    <div class="controls">
        <i title="{$ yaml_view ? 'Simple View' : 'Json View' $}"
           class="fa" ng-class="{'fa-file-text':!yaml_view, 'fa-list':yaml_view}"
           ng-click="yaml_view = !yaml_view;"></i>
        <i title="Close" class="fa fa-times" ng-click="closeModal()"></i>
    </div>
    <h2 class="tabbed">
        <b>Template: </b>
        <span id="template_name">{$ data.metadata.name $}</span>
    </h2>
    <div ng-show="!yaml_view">
        <div class="definition-block" ng-if="data.entities||(data.definitions && data.definitions.entities)">
            <h3>Entities</h3>
            <div ng-if="!v3"
                 ng-repeat="entity in data.definitions.entities | orderBy: 'entity.category' track by entity.entity.template_id">
                <details>
                    <summary>{$ entity.entity.template_id $}</summary>
                    <div class="tabbed">
                        <ul>
                            <li ng-repeat="(property, value) in entity.entity track by $index">
                                <b>{$ property $}:</b> {$ value $}
                            </li>
                        </ul>
                    </div>
                </details>
            </div>
            <div ng-if="v3" ng-repeat="(key,entity) in data.entities ">
                <details>
                    <summary>{$ key $}</summary>
                    <div class="tabbed">
                        <ul>
                            <li ng-repeat="(property, value) in entity track by $index">
                                <b>{$ property $}:</b> {$ value $}
                            </li>
                        </ul>
                    </div>
                </details>
            </div>
            <br>
        </div>
        <div class="definition-block" ng-if="data.definitions && data.definitions.relationships">
            <h3>Relationships</h3>
            <div ng-repeat="rel in data.definitions.relationships track by rel.relationship.template_id">
                <details>
                    <summary>{$ rel.relationship.template_id $}</summary>
                    <div class="tabbed">
                        <ul>
                            <li ng-repeat="(property, value) in rel.relationship track by $index">
                                <b>{$ property $}:</b> {$ value $}
                            </li>
                        </ul>
                    </div>
                </details>
            </div>
            <br>
        </div>


        <div class="definition-block" ng-if="data.equivalences">
            <h3>Equivalences</h3>
            <ul>
                <li ng-repeat="equs in data.equivalences track by $index">
                    <h4>Equivalence</h4>
                    <div ng-repeat="equ in equs.equivalence">
                        <details>
                            <summary>{$ equ.entity.name $}</summary>
                            <div class="tabbed">
                                <ul>
                                    <li ng-repeat="(property, value) in equ.entity">
                                        <b>{$ property $}:</b> {$ value $}
                                    </li>
       
                                </ul>
                            </div>
                        </details>
                    </div>
               </li>  
            </ul>
            <br>
		</div>
		<div class="definition-block" ng-if="data.scenarios">
            <h3>Scenarios</h3>
            <div ng-repeat="scenario in data.scenarios track by $index">
                <details>
                    <summary>{$ scenario.condition||scenario.scenario.condition $}</summary>
                    <div class="tabbed">
                        <b>Actions:</b>
                        <ol>
                            <div ng-if="!v3" ng-repeat="action in scenario.scenario.actions track by $index">
                                <li>
                                    <ul>
                                        <li><b>action:</b> {$ action.action.action_type $}</li>
                                        <li ng-repeat="(key, value) in action.action.action_target track by $index">
                                            <b>{$ key $}:</b> {$ value $}
                                        </li>
                                        <li ng-repeat="(property, value) in action.action.properties track by $index">
                                            <span ng-if="!isObject(value)"> <b>{$ property $}:</b> {$ value $}</span>
                                            <span ng-if="isObject(value)">
                                                <b>{$ property $}</b>
                                                <ol>
                                                    <li ng-repeat="(label, data) in value track by $index">
                                                        <b>{$ label $}:</b> {$ data $}
                                                    </li>
                                                </ol>
                                            </span>

                                        </li>
                                    </ul>
                                </li>
                            </div>
                            <div ng-if="v3" ng-repeat="action in scenario.actions track by $index">
                                <li>
                                    <ul>
                                        <li><b>action:</b> {$ keys(action)[0] $}</li>
                                        <li ng-repeat="(key, value) in action[keys(action)[0]] track by $index">
                                            <span ng-if="!isObject(value)"> <b>{$ key $}:</b> {$ value $}</span>
                                            <span ng-if="isObject(value)">
                                                <b> {$ key $}</b>
                                                <ol>
                                                    <li ng-repeat="(label, data) in value track by $index">
                                                        <b>{$ label $}:</b> {$ data $}
                                                    </li>
                                                </ol>
                                            </span>
                                        </li>
                                    </ul>
                                </li>
                            </div>
                        </ol>
                    </div>
                </details>
            </div>
            <br>
        </div>
        </div>
    <div ng-show="yaml_view" class="definition-block">
        <pre contentEditable="false">{$ str_data $}</pre>
    </div>

       
    </div>
   
